<!-- toaster directive -->
<toaster-container
        toaster-options="{'position-class': 'toast-top-right', 'close-button':true}"></toaster-container>
<!-- / toaster directive -->
<!-- 导航条 -->
<div class="bg-white bread-crumb">
    <ul class="breadcrumb b-a m-b-n-xs lter b-b wrapper-md">
        <li><a ui-sref="main"><i class="glyphicon glyphicon-user"></i>数据管理</a></li>
        <li><a ui-sref="main.download.house" class="active" ng-bind="title"></a></li>
    </ul>
</div>


<!-- 内容区域 -->
<div ng-hide="loading" class=" content"> <!-- ng-hide="loading" -->
    <!-- 数据显示 -->
    <div class="wrapper-data">
        <div class="panel panel-default">
            <!-- 头部 -->
            <div class="panel-heading clearfix">

                <div class="w-auto">

                </div>
            </div>
            <div class="table-responsive item-responsive">
                <div class="item-tap">
                <div class="item-content clearfix">

                <div class="item-tap">
                    <h6>数据导出</h6>
                    <p class="item-title">请选择对应数据到Excel</p>
                    <div class="item-content getout clearfix">
                        <a href="dac/download/policeDownload?groudID=1"><span class="email-bg"></span>房屋信息</a>
                        <a href="dac/download/policeDownload?groudID=2"><span class="email-bg"></span>人员信息</a>
                        <a href="dac/download/policeDownload?groudID=3"><span class="email-bg"></span>出入记录信息</a>
                    </div>
                </div>
            </div>

        </div>

    </div>
    <div class="layerparent" ng-show="pass">
        <div class="item-layer">
            <p class="layerTitle">安全验证</p>
            <div class="inputDiv">
                <label for="phoneNumber">手机号：</label>
                <input type="text" id="phoneNumber" ng-model="phone" readonly="readonly" placeholder="请输入当前用户的手机号"  />
            </div>
            <div class="inputDiv">
                <label for="phoneCode">验证码：</label>
                <input type="text" id="phoneCode" class="short" maxlength="6" placeholder="请输入验证码" ng-change="check()" ng-model="phoneCode"/>
                <button class="getCode" id="getCode" ng-click = "getSmsCode(phone)">获取验证码</button>
                <span ng-show="codeNotpass" style="margin-left: 100px;">验证码不正确！</span>
            </div>
            <div class="submidDiv">
                <button ng-disabled="submitBtn"  ng-class="{ture:'',false:'isactive'}[submitBtn]" ng-click="test()">验证</button>
            </div>

        </div>
    </div>

</div>
<style scoped>
    .layerparent{
        position: fixed;
        left: 13%;
        top: 0;
        width: 87%;
        height: calc(100% - 21px);
        background-color: rgba(0,0,0,.3);
        z-index: 999;
    }
    .item-layer{
        background-color: #fff;
        position: fixed;
        top: 30%;
        left: 35%;
        width: 550px;
        border-radius: 5px;
        padding:5px 15px;
        box-shadow: 0 0 10px 2px rgba(0,0,0,.2);
    }
    .layerTitle{
        line-height:40px;
        border-bottom: 2px solid #78a7ff;
    }
    .item-layer>div{
        margin-left: 20px;
        line-height:60px;
        position: relative;
    }
    .item-layer .inputDiv label{
        width: 60px;
    }
    .item-layer .inputDiv input{
        display: inline-block;
        height: 30px;
        line-height: 28px!important;
        width: 250px;
        border-radius: 4px;
        border: 1px solid #dadada;
        padding-left: 10px;
        font-size: 14px;
        vertical-align: middle;
    }
    .item-layer .inputDiv input.short{
        width: 150px;
    }
    .item-layer .inputDiv input:focus{
        border: 1px solid #78a7ff;
    }
    .item-layer .submidDiv{
        text-align: center;
    }
    .item-layer .inputDiv span{
        color: red;
        font-size: 14px;
    }
    .item-layer .inputDiv .getCode{
        width: 90px;
        height: 30px;
        line-height: 28px;
        border: none;
        color: #fff;
        background-color: #78a7ff;
        border-radius: 4px;
        position: absolute;
        left: 225px;
        top: 17px;
        font-size: 14px;
    }
    .item-layer .submidDiv button{
        border-radius: 4px;
        padding: 0 22px;
        height: 30px;
        line-height: 30px;
        border: 1px solid #78a7ff;
        color: #fff;
        margin-top:15px;
        background-color: rgba(0,0,0,.2);
        border:1px solid rgba(0,0,0,.2);
    }
    .item-layer .submidDiv .isactive{
        border: 1px solid #78a7ff;
        background-color: #78a7ff;
    }
    .item-responsive,.item-tap,.item-content{
        width: 100%;
    }
    .layerTitle{
        line-height:40px;
        border-bottom: 2px solid #78a7ff;
    }
    .item-layer>div{
        margin-left: 20px;
        line-height:60px;
        position: relative;
    }
    .item-layer .inputDiv label{
        width: 60px;
    }
    .item-layer .inputDiv input{
        display: inline-block;
        height: 30px;
        line-height: 28px!important;
        width: 250px;
        border-radius: 4px;
        border: 1px solid #dadada;
        padding-left: 10px;
        font-size: 14px;
        vertical-align: middle;
    }
    .item-layer .inputDiv input.short{
        width: 150px;
    }
    .item-layer .inputDiv input:focus{
        border: 1px solid #78a7ff;
    }
    .item-layer .submidDiv{
        text-align: center;
    }
    .item-layer .inputDiv span{
        color: red;
        font-size: 14px;
    }
    .item-layer .inputDiv .getCode{
        width: 90px;
        height: 30px;
        line-height: 28px;
        border: none;
        color: #fff;
        background-color: #78a7ff;
        border-radius: 4px;
        position: absolute;
        left: 225px;
        top: 17px;
        font-size: 14px;
    }
    .item-layer .submidDiv button{
        border-radius: 4px;
        padding: 0 22px;
        height: 30px;
        line-height: 30px;
        border: 1px solid #78a7ff;
        color: #fff;
        margin-top:15px;
        background-color: rgba(0,0,0,.2);
        border:1px solid rgba(0,0,0,.2);
    }
    .item-layer .submidDiv .isactive{
        border: 1px solid #78a7ff;
        background-color: #78a7ff;
    }
    .item-responsive,.item-tap,.item-content{
        width: 100%;
    }
    .item-title{
        padding-left: 15px!important;
        line-height: 35px!important;
        margin-top: 10px!important;
    }
    .item-tap h6{
        font-size: 17px;
        margin:0;
        padding:10px 15px;
        background-color: #F5F6FC;
    }
    .item-tap p{
        font-size: 15px;
        margin: 0;
        padding:0;
    }
    .item-content{
        width: calc(100% - 45px);
        margin:15px 0 15px 15px;
    }
    .item-content .item-moder{
        width: 30%;
        height: 180px;
        background-color: #F5F6FC;
        padding:5px 10px;
        float: left;
        margin:0 15px 15px 0;
    }
    .item-moder>div{
        float: left;
    }
    .item-moder .left{
        width: 75%;
        padding: 10px;
    }
    .item-moder .right{
        width: 25%;

    }
    .item-moder .right .rightBtn{
        display: inline-block;
        border:1px solid #78a7ff;
        color: #78a7ff;
        border-radius:4px;
        background-color: #fff;
        margin: 12px 0 12px 0;
        padding:0px 6px;
        font-size: 14px;
        position: relative;
    }
    .item-moder .right .rightBtn a{
        color: #78a7ff;
    }
    .item-moder .right .rightBtn:hover{
        background-color: #78a7ff;
        color: #fff;
    }
    .item-moder .right .rightBtn:hover a{
        color: #fff;
    }
    .item-moder .right .rightBtn .fileInput{
        border: none;
        height: 30px;
        position: absolute;
        left: 0px;
        top:0px;
        z-index: 99;
        width: 100%;
        overflow: hidden;
        margin: 0;
    }
    .getout{
        min-height: 200px;
    }
    .getout a{
        padding: 10px 15px;
        margin: 0 15px 15px 0;
        float: left;
        background-color: #F5F6FC;
        color: #58666e;
        border-radius: 4px;
        border:1px solid #F5F6FC;
    }
    .getout a:hover{
        color: #78a7ff
    }
    .email-bg{
        display: inline-block;
        width: 25px;
        height: 18px;
        vertical-align:middle;
        background-image: url(../../../res/img/email.png);
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 50%;
    }
</style>